<template>
	<view class="x-orderlist-card"
		@click="clickCardAction">
		<view style="padding: 0 20rpx 0 38rpx;">
			<view class="flex-center-between u-p-b-16">
				<view class="u-p-l-12 flex-center">
					<view class="u-avatar-34 clear-flex">
						<x-image :src="showImage(item.merchantLogoImgUrl, 'logo')" />
					</view>
					<view class="u-m-l-8 u-f-28 u-lh-40 font-medio">{{ item.merchantName || 'Dondego' }}</view>
				</view>

				<view v-if="showStatus" class="u-f-28 u-lh-40 font-medio color-red">{{ dealStatusText() }}</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="1" bgColor="#EEEEEE"></u-gap>
		</view>

		<!-- 卡片 -->
		<view>
			<view v-for="(_item, _index) in item.itemList || []" :key="_index">
				<view v-if="[6].includes(item.orderType)" style="padding: 24rpx 30rpx 22rpx 30rpx;">
					<view
					class="flex-between flex-column"
					style="padding: 4rpx 0 4rpx 20rpx; height: 172rpx; width: 100%;"
					>
						<view class="u-f-28 u-lh-40 font-medio linecamp-2">{{ _item.goodsName || '' }}</view>
						
						<view class="u-m-t-4 u-f-26 u-lh-36 flex-between flex-column" style="width: 100%;">
							<view class="flex-center-between">
								<view class="color-grew">{{ _item.specs || '' }}</view>
								<view class="font-bold">x{{ _item.amount || 0 }}</view>
							</view>
				
							<view class="flex-center-between u-m-t-14">
								<view></view>
								<!-- <view>秒杀订单</view> -->
								<view
								class="font-bold"
								style="color: #FC2642;"
								>{{ lang_unit.money }}{{ (_item.discountPrice || 0).toFixed(2) }}</view>
							</view>
						</view>
					</view>
				</view>
				<coupon-card v-else-if="[5, 7].includes(item.orderType)" :item="({ ..._item, title: _item.goodsName, couponType: 3, canBuy: false })"></coupon-card>
				<goods-card v-else :item="dealItem(_item)" :score="item.payType === 1"></goods-card>
			</view>
		</view>

		<view style="padding: 0 20rpx 0 38rpx;">
			<!-- 分割线 -->
			<u-gap height="1" bgColor="#EEEEEE"></u-gap>

			<view v-show="showTime" class="u-m-t-20 u-f-26 u-lh-36 font-bold">
				<view class="u-m-b-20 flex-center-between">
					<view></view>

					<view class="flex-center clear-flex u-p-r-10">
						<!-- <view class="flex-center">
							<view class="color-grew">仅剩</view>
							<view class="u-f-26 u-lh-36" style="padding: 0 8rpx;">20</view>
							<view class="color-grew">件</view>
						</view> -->

						<view class="u-m-l-34 flex-center">
							<view class="u-p-r-8 color-grew">{{ lang_common.counttime }}</view>
							<view class="u-f-26 u-lh-36">
								<x-counttime ref="counttime" :time="item.waitPayTime" format="H+:m+:s+"
									@change="timeChange"></x-counttime>
							</view>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<u-gap height="1" bg-color="#EEEEEE"></u-gap>
			</view>

			<view class="u-m-t-20 flex-center-between">
				<view class="u-f-26 u-lh-36 font-bold">
					<!-- 0待支付，1已支付或待拼团，2待发货或待核销，3待收货或已核销，4已评价5已完成，-1退单，-2支付费用失败,-3,订单已关闭 -->
					<view v-if="[1, 2, 3, 4, 5].includes(item.orderStatus)" class="flex-center">
						<view>{{ lang_order.actualPayment }}：</view>
						<view class="color-red">
							{{ item.payType === 1 ? `${ (item.totalIntegral || 0) + lang_common.score }` : `${ lang_unit.money + (item.totalAmount || 0) }` }}
						</view>
					</view>
				</view>
				<view v-if="showButton" class="flex-center">
					<view v-for="(item, index) in buttons[statusObj.bIndex] || []" :key="index"
						:class="[index ? 'u-m-l-16' : '']" @tap.stop>
						<x-common-btn width="150" height="56"
							:background="item.active ? `linear-gradient(to right, #F94404 0%, #FD164F 100%)` : '#FFFFFF'"
							:color="item.active ? '#FFFFFF' : '#333333'"
							:borderColor="item.active ? 'rgba(0,0,0,0)' : '#E9E9E9'" @click="changeAction(item)">
							<view class="u-f-24 u-lh-34 font-medio">{{ lang_order[item.key] }}</view>
						</x-common-btn>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderInfo } from '@/api/user/order.js'
	import {
		payAction
	} from '@/utils/pay.js'
	// 订单类型，1.普通商城，2.秒杀，3.预售，4.拼团，5.平台优惠券，6.充值商品，7.商家优惠券，8.购物车商品
	const orderlist = [
		{ key: 'pendingPayment', label: '待付款', value: 0, bIndex: 0 },
		{ key: 'waitEvaluate', label: '待评价', value: 4, bIndex: 3 },
		{ key: 'chargeback', label: '退单', value: -1 },
		{ key: 'payFailure', label: '支付失败', value: -2 },
		{ key: 'orderClose', label: '订单已关闭', value: -3, bIndex: 5 },
		{ key: 'waitToExam', label: '待审核', value: 10 },
		{ key: 'examedToShip', label: '审核成功待发货', value: 11 },
		{ key: 'shipedToRefund', label: '发货成功待退款', value: 12 },
		{ key: 'refunded', label: '已退款', value: 13 }
	]
	const refundlist = [
		{ key: 'waitToExam', label: '待审核', value: 0, bIndex: 6 },
		{ key: 'examedToShip', label: '审核成功待发货', value: 1, bIndex: 7 },
		{ key: 'shipedToRefund', label: '发货成功待退款', value: 2, bIndex: -1 },
		{ key: 'refunded', label: '已退款', value: 3, bIndex: 12 },
		{ key: 'examReject', label: '审核拒绝', value: -1, bIndex: 4 },
		{ key: 'saledClose', label: '售后已关闭', value: -2, bIndex: 4 },
		{ key: 'refundFailure', label: '退款失败', value: -3, bIndex: 4 }
	]
	export default {
		props: {
			item: {
				default: () => ({})
			},
			isRefund: {
				default: false
			},
			showButton: {
				default: true
			},
			showStatus: {
				default: true
			}
		},
		data() {
			// 0待支付，1已支付或待拼团，2待发货或待核销，3待收货或已核销，4已评价5已完成，-1退单，-2支付费用失败,-3,订单已关闭,10是待审核，11审核成功待发货，12发货成功待退款，13已退款
			// 退款状态，0是待审核，1审核成功待发货，2发货成功待退款，3已退款-1审核被拒，-2是已关闭售后-3退款失败
			let cancelOrder = { key: 'cancelOrder', label: '取消订单' };
			let deleteOrder = { key: 'deleteOrder', label: '删除订单' };
			let evaluateOrder = { key: 'evaluateOrder', label: '评价', active: true, page: '/pages/user/order/comment/comment' }
			let toPay = { key: 'toPay', label: '去支付', active: true };
			let confrimExtend = { key: 'confrimExtend', label: '确认收货', active: true }
			let extended = { key: 'extended', label: '延长收货' }
			let watchlogistics = { key: 'watchlogistics', label: '查看物流' }
			
			let applyRefund = { key: 'applyRefund', label: '申请退款', active: true, page: '/pages/user/order/saled/refund/refund' };
			let applySaled = { key: 'applySaled', label: '申请售后', page: '/pages/user/order/saled/index/index' }
			let cancelApply = { key: 'cancelApply', label: '撤销申请' }
			let changeApply = { key: 'changeApply', label: '修改申请', active: true }
			let saledInfo = { key: 'saledInfo', label: '售后详情', active: true, page: '/pages/user/order/detail/refund' }
			let writeCompanyNumber = { key: 'writeCompanyNumber', label: '填写单号', active: true, page: '/pages/user/order/saled/write/write' }
			
			let inviteFriend = { key: 'inviteFriend', label: '邀请好友', page: '' }
			let buttons = [
				[ cancelOrder, toPay ], // 待支付
				[ applyRefund ], // 已支付
				[/* extended, watchlogistics*/ applyRefund, confrimExtend ],
				[ applySaled, evaluateOrder ],
				[ deleteOrder, saledInfo ],
				[ deleteOrder ],
				
				// 退款
				[ cancelApply /* changeApply */ ],
				[/* cancelApply */  writeCompanyNumber ],
				// 拼团中
				[ inviteFriend, applyRefund ],
				
				[ deleteOrder, applySaled ],
				// 待收货&售后失败
				[ confrimExtend, saledInfo ],
				// 待评价&售后失败
				[ evaluateOrder, saledInfo],
				[ saledInfo ]
			]
			return {
				buttons,
				showTime: false
			}
		},
		computed: {
			orderStatusObj() {
				let list = [...orderlist]
				let {
					orderType,
					orderStatus
				} = this.item
				if (orderType === 4) {
					list.push({ key: 'waitToCollage', label: '待拼团', value: 1, bIndex: 8 })
				} else {
					list.push({ key: 'paid', label: '已付款', value: 1, bIndex: 1 })
				}
				if ([5, 7].includes(orderType)) {
					list.push({ key: 'waitToWrite', label: '待核销', value: 2 })
					list.push({ key: 'writen', label: '已核销', value: 3 })
				} else {
					list.push({ key: 'delivery', label: '待发货', value: 2 })
					list.push({ key: 'receivedGoods', label: '待收货', value: 3, bIndex: 2 })
				}
				list.push({ key: 'completed', label: '已完成', value: 5, bIndex: orderType === 6 ? 5 : 9 })
				return ({
					bIndex: -1,
					...(list.find(item => item.value === orderStatus))
				}) || ({
					bIndex: -1
				})
			},
			refundStatusObj() {
				let {
					refundStatus
				} = this.item
				if (typeof refundStatus === 'number') {
					return ({
						bIndex: -1,
						...(refundlist.find(item => item.value === refundStatus))
					}) || ({
						bIndex: -1
					})
				}
				return ({
					bIndex: -1
				})
			},
			statusObj() {
				let {
					refundStatus
				} = this.item
				let { value: orderValue } = this.orderStatusObj
				let bIndex = this.refundStatusObj.bIndex || -1
				if (orderValue === 3) {
					bIndex = refundStatus < 0 ? 10 : 12
				} else if (orderValue === 4) {
					bIndex = refundStatus < 0 ? 11 : refundStatus === 1 ? 7 : 12
				} else if (orderValue === 5) {
					bIndex = typeof refundStatus === 'number' ? 4 : 5
				}
				return typeof refundStatus === 'number' ? { ...this.refundStatusObj, bIndex  } : this.orderStatusObj
			}
		},
		methods: {
			// 点击卡片触发
			clickCardAction() {
				let { orderStatus, orderType, orderNumber } = this.item
				let pageKey = this.isRefund ? 'refund' : 'detail'
				let Params = `orderNumber=${ orderNumber }${ this.showButton ? `&showButton=${ this.showButton }` : '' }`
				if (orderStatus > 0 && orderType === 4 || orderType !== 4) {
					this.jumpUrl(`/pages/user/order/detail/${ pageKey }?${ Params }`)
				}
			},
			dealStatusText() {
				let orderKey = this.orderStatusObj.key
				let refundKey = this.refundStatusObj.key
				let refundValue = this.refundStatusObj.value
				if (this.isRefund) {
					return this.lang_order[refundKey] || ''
				} else {
					if (typeof orderKey === 'string') {
						return this.lang_order[orderKey] + (typeof refundKey === 'string' && this.lang_order[refundKey] && refundValue > -1 ?
							`,${ this.lang_order[refundKey] }` : '')
					}
					return ''
				}
			},
			// 处理内容
			dealItem(item) {
				let {
					finalPrice,
					stockSpecs,
					goodsName,
					goodsImage
				} = item
				return ({
					...item,
					orderType: this.item.orderType,
					discountPrice: finalPrice,
					specs: stockSpecs,
					title: goodsName,
					imgUrl: goodsImage
				})
			},
			// 倒计时改变后
			timeChange(e) {
				let {
					orderType,
					orderStatus,
					refundStatus
				} = this.item
				this.showTime =  (e > 0 && (!orderStatus) && typeof refundStatus !== 'number')
				if (!this.showTime) {
					let node = this.$refs.counttime
					node && node.destoryAction()
				}
			},
			// 按钮触发
			changeAction(item) {
				let { key, page } = item
				let { orderNumber } = this.item
				if (page) {
					if (key === 'saledInfo') {
						this.jumpUrl(`${ page }?orderNumber=${ orderNumber }&showButton=1`)
					} else if (key === 'applyRefund') {
						orderInfo({ orderNumber }).then((result) => {
							uni.navigateTo({
								url: `${ page }?orderNumber=${ orderNumber }&refundAction=1`,
								success: res => {
									res.eventChannel.emit('saled-refund', (result))
								}
							})
						})
					} else if (key === 'evaluateOrder') {
						uni.navigateTo({
							url: `${ page }?orderNumber=${ orderNumber }`,
							success: res => {
								res.eventChannel.emit('order-comment-page', (this.item))
							}
						})
					} else {
						this.jumpUrl(`${ page }?orderNumber=${ orderNumber }`)
					}
				} else {
					this.$emit('change', ({ key, orderNumber }))
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.x-orderlist-card {
		padding: 20rpx 0;
		background-color: #FFFFFF;
	}
</style>
